<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>animate练习</title>
		<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
		<style type="text/css">
			#div1{
				border: 1px solid #aaa;
				border-radius: 6px;
				
				background-color: #f00;
				width: 100px;
				height: 100px;
				position: absolute;
				top: 50px;
				left: 10px;
			}
			
		</style>
	</head>
	<body>
		
		<input id="startBtn" type="button" value="Start">
		<input id="stopBtn" type="button" value="Stop">
		<div id="div1">hello kitity!</div>
		
		<script type="text/javascript">
			//$(...).animate(改变得css（只支持单个得数据得css值，不支持颜色动画），过渡时间，Callbacks)
					// 要修改得CSS得目标值{xxx: aaa,} 可以有多个,是并行的
			//  animate 和 Class+Transition
				// 1. 灵活性: animate可以停止, Transition不可以,
				// 2. 效率: animate效率低, Transition效率高,
				// 3. 支持的全面性: animate不支持颜色过渡, Transition支持
					
				// animate: 是将动画得任务通过定时器得方式放到队列里
				// 		stop: 如果有多个动画得话,当前动画被打断,后面得动画会继续运行
				// 		stop(true): 停止动画, 并且清空队列
				
				
				// 并行和串行动画
				// 		并行: 多个CSS同时改变
				// 		串行: 针对同一批元素, 当有多个动画得时候, 后面得动画必须等待前面得动画完成以后,才能执行.
				
				
			$(function(){
				var $div1 = $('#div1');
				
				$('#startBtn').click(function(e){
					$div1.animate({
						width: 200
						// 同时进行
						// height: 200
					}, 1000)
					.animate({
						height: 200
					}, 1000)
					.animate({
						top: 100
					});
				});
				
				$('#stopBtn').click(function(e){
					// $div1.stop();
					$div1.stop(true);
				});
			});
					
		</script>
	</body>
</html>
